<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        .aui-content{
            background: #fff;
        }
        .controlimg{
            word-break:break-all !important; /*支持IE，chrome，FF不支持*/
            word-wrap:break-word !important;/*支持IE，chrome，FF*/
        }
        .controlimg img{
            width: 100% !important;
        }
    </style>

</head>
<body>
    <div class="aui-content" id="app">
        <ul class="aui-list aui-media-list">
            <li class="aui-list-item">
                <div class="aui-media-list-item-inner">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-text">
                            <div class="aui-list-item-title aui-font-size-14">{{ title }}</div>
                        </div>

                        <div class="aui-list-item-text aui-padded-t-10 aui-border-b">
                            <div class="aui-font-size-12 aui-padded-b-5">
                                <span class="aui-text-danger">摘要：</span>{{ data.abstract }}
                            </div>
                           <hr>
                        </div>
                        <div class="aui-list-item-text aui-padded-t-10 ">
                            <p class="controlimg" v-html="data.content">
                            </p>
                        </div>
                        <div class="aui-info aui-font-size-12" style="padding-top:5px;">
                            <div class="aui-info-item">
                                <span class="aui-margin-l-5">孟老师</span>
                            </div>
                            <div class="aui-info-item">{{data.create_time}}</div>
                        </div>
                    </div>
                </div>

            </li>
        </ul>
    </div>

</body>
</html>

<script src="../script/api.js"></script>
<script src="../script/common.js"></script>
<script src="../script/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            title: '',
            data: []
        },
        methods: {
            init: function () {
                api.ajax({
                    url: article_content_url,
                    method: 'post',
                    timeout: 30,
                    dataType: 'json',
                    returnAll: false,
                    data: {
                        values: {
                            id: vm.id
                        }
                    }
                }, function (ret, err) {
                    if (ret) {
                        vm.data = ret.data;
                        console.log(JSON.stringify(ret));
                    } else {
                        console.log(JSON.stringify(err));
                    }
                });
            }
        }
    });

    apiready = function () {
        vm.id = api.pageParam.id;
        vm.title = api.pageParam.title;
        vm.init();
    };
</script>

